<template>
    <div class="detailTask">
        <header-nav :leftArrow="true" :titelText="'案件详情'"></header-nav>
        <div class="detail">
            <div class="infoBox">
                <div class="title">
                    <div class="title-left">
                        <div class="titleIcon"></div>
                        <div>案件信息</div>
                    </div>
                </div>
                <div class="info">
                    <div class="infoItem">
                        <div class="left">案件来源</div>
                        <div class="right">
                            {{ detailForm.sourceName }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.otherSource">
                        <div class="left">其他来源</div>
                        <div class="right">
                            {{ detailForm.otherSource }}
                        </div>
                    </div>
                    <div class="infoItem">
                        <div class="left">案由</div>
                        <div class="right">
                            {{ changeCaseActionName(detailForm.caseActionName) }}
                        </div>
                    </div>
                    <div class="infoItem">
                        <div class="left">简要案情</div>
                        <div class="right">
                            {{ detailForm.caseBrief }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.sourceName !== '其他'">
                        <div class="left">关联任务</div>
                        <div class="right right1" @click="gotoTaskDetail">
                            查看任务
                        </div>
                    </div>
                </div>
            </div>

            <div class="infoBox">
                <div class="title">
                    <div class="title-left">
                        <div class="titleIcon"></div>
                        <div>当事人信息</div>
                    </div>
                    <div class="title-right">
                        {{
            detailForm.placeInfo?.partyType == 0
                ? '自然人'
                : detailForm.placeInfo?.partyType == 1
                    ? '法人'
                    : detailForm.placeInfo?.partyType == 2
                        ? '个体工商户'
                        : detailForm.placeInfo?.partyType == 3
                            ? '非法人组织'
                            : ''
        }}
                    </div>
                </div>
                <div class="info">
                    <div class="infoItem">
                        <div class="left">
                            {{
                detailForm.placeInfo?.partyType == 0
                    ? '姓名'
                    : detailForm.placeInfo?.partyType == 2
                        ? '字号名称'
                        : '单位名称'
            }}
                        </div>
                        <div class="right">
                            {{ detailForm.placeInfo?.placeName }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                        <div class="left">性别</div>
                        <div class="right">
                            {{
            detailForm.placeInfo?.sex == 1
                ? '男'
                : detailForm.placeInfo?.sex == 2
                    ? '女'
                    : ''
        }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                        <div class="left">出生日期</div>
                        <div class="right">
                            {{ detailForm.placeInfo?.birthDate }}
                        </div>
                    </div>
                    <div class="infoItem">
                        <div class="left">
                            {{
            detailForm.placeInfo?.partyType == 0 ||
                detailForm.placeInfo?.partyType == 2
                ? '联系电话'
                : '单位联系电话'
        }}
                        </div>
                        <div class="right">
                            {{ detailForm.placeInfo?.contactsTel }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                        <div class="left">证件类型</div>
                        <div class="right">
                            {{ detailForm.placeInfo?.idTypeName }}
                        </div>
                    </div>
                    <div class="infoItem">
                        <div class="left">
                            {{
            detailForm.placeInfo?.partyType == 0
                ? '证件号码'
                : '社会统一信用代码'
        }}
                        </div>
                        <div class="right">{{ detailForm.placeInfo?.idCode }}</div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
                        <div class="left">
                            {{
            detailForm.placeInfo?.partyType == 1
                ? '法人'
                : detailForm.placeInfo?.partyType == 3
                    ? '负责人'
                    : '经营者姓名'
        }}
                        </div>
                        <div class="right">{{ detailForm.placeInfo?.headName }}</div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
            detailForm.placeInfo?.partyType == 3
            ">
                        <div class="left">
                            {{
            detailForm.placeInfo?.partyType == 1
                ? '法人电话'
                : '负责人电话'
        }}
                        </div>
                        <div class="right">{{ detailForm.placeInfo?.headTel }}</div>
                    </div>
                    <div class="infoItem">
                        <div class="left">
                            {{
            detailForm.placeInfo?.partyType == 0 ? '住址' : '注册地址'
        }}
                        </div>
                        <div class="right">
                            {{
                detailForm.placeInfo?.registerCity +
                detailForm.placeInfo?.registerCounty +
                detailForm.placeInfo?.registerTown +
                detailForm.placeInfo?.registerAddress
            }}
                        </div>
                    </div>
                    <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
                        <div class="left">经营地址</div>
                        <div class="right">
                            {{
            detailForm.placeInfo?.operateCity +
                            detailForm.placeInfo?.operateCounty +
                            detailForm.placeInfo?.operateTown +
                            detailForm.placeInfo?.operateAddress
                            }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="infoBox" v-if="detailForm.resultFileUrl">
                <div class="title">
                    <div class="title-left">
                        <div class="titleIcon"></div>
                        <div>检查结果表</div>
                    </div>
                </div>
                <div class="info">
                    <div class="infoItem">
                        <div class="ws-left">
                            <img src="../../assets/images/wsYes.png" alt="" />
                            <div>检查结果表.doc</div>
                        </div>
                        <div class="ws-right" @click="viewFile(detailForm.resultFileUrl)">
                            查看
                        </div>
                    </div>
                </div>
            </div>

            <div class="infoBox">
                <div class="title">
                    <div class="title-left">
                        <div class="titleIcon"></div>
                        <div>办案人员</div>
                    </div>
                </div>
                <div class="info">
                    <div class="infoItem">
                        <div class="left">主办人</div>
                        <div class="right">
                            {{ detailForm.sponsor }}
                        </div>
                    </div>
                    <div class="infoItem">
                        <div class="left">协办人</div>
                        <div class="right">
                            {{ detailForm.organizer }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="infoBox" v-if="detailForm.fileInfoList&&detailForm.fileInfoList.length>0">
                <div class="title">
                    <div class="title-left">
                        <div class="titleIcon"></div>
                        <div>处罚信息</div>
                    </div>
                </div>

                <div class="info">
                    <div class="infoItem">
                        <div class="left">处罚金额</div>
                        <div class="right">
                            {{ detailForm.penaltyAmount }}元
                        </div>
                    </div>
                </div>

                <div class="info">
                    <div class="infoItem" v-for="item in detailForm.fileInfoList">
                        <div class="ws-left">
                            <img src="../../assets/images/wsYes.png" alt="" />
                            <div>{{item.fileName}}</div>
                        </div>
                        <div class="ws-right" @click="viewFile(item.newFileUrl)">
                            查看
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="detail">
import { imgUrlToBase64 } from '../../util/util'
const { useRegister, usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const detailForm = ref({})

const active2 = ref([])

const sign1 = ref('')
const sign2 = ref('')
const sign3 = ref('')
const signFlag = ref(0)
const signPicker = ref(false)
const goSign = (val) => {
    signFlag.value = val
    signPicker.value = true
}

const changeCaseActionName = (str) => {
    if (str) {
        return str.split(',').map((item, index) => `${index + 1}. ${item}`).join("；")
    } else {
        return ''
    }
}
//查看文件
const viewFile = async (url) => {
    router.push({
        name: 'fileDetail',
        query: {
            url: url,
        },
    })
}

const gotoTaskDetail = () => {
    router.push({ name: 'detailSuperviseTasktwo', query: { id: detailForm.value.taskId } })
}
onMounted(async () => {
    if (id.value != '') {
        const res = await useRegister.caseDetail(id.value)
        if (res.code == 0) {
            detailForm.value = res.data
            res.data.handleList.forEach((item, index) => {
                if (item.nodeStatus == 2) {
                    active2.value++
                }
            })
            console.log(detailForm.value)
        }
    }
})
</script>
<style lang="scss" scoped>
.detailTask {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #f7f7f7;

    .detail {
        width: 100%;
        height: calc(100% - 46px);
        overflow-y: auto;
        margin-top: 46px;

        .infoBox {
            background-color: #ffffff;
            margin: 10px 8px;
            border-radius: 8px;

            .title {
                padding: 16px 12px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f5f5f5;

                .title-left {
                    display: flex;
                    align-items: center;

                    .titleIcon {
                        width: 4px;
                        height: 14px;
                        background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
                        border-radius: 20px;
                        margin-right: 8px;
                    }
                }

                .title-right {
                    padding: 5px 12px;
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 20px;
                    color: #1764ce;
                    background-color: rgba(23, 100, 206, 0.1);
                    border-radius: 4px;
                }
            }

            .info {
                padding: 16px 12px;

                .infoItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 12px;

                    .ws-left {
                        display: flex;
                        align-items: center;
                        color: #2b2b2b;
                        font-size: 15px;
                        font-weight: 500;

                        img {
                            width: 36px;
                            height: 36px;
                        }
                    }

                    .ws-right {
                        min-width: 50px;
                        color: #1764ce;
                        font-size: 14px;
                        font-weight: 400;
                    }

                    .left {
                        font-size: 15px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: #8c8c8c;
                        min-width: 80px;
                        margin-right: 20px;
                    }

                    .right {
                        width: 1px;
                        font-size: 15px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: #2b2b2b;
                        text-align: right;
                        flex: 1;
                        word-wrap: break-word;
                        /* 设置自动换行 */
                    }

                    .right1 {
                        color: #1764ce;
                    }
                }

                .infoItem:last-child {
                    margin-bottom: 0;
                }

                .danger {
                    margin-bottom: 12px;
                }

                .danger:last-child {
                    margin-bottom: 0;
                }
            }

            .result {
                padding: 16px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f5f5f5;

                .result-title {
                    // width: 140px;
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 24px;
                    color: #4d4d4d;
                }
            }
        }
    }
}

.setpBox {
    background-color: #ffffff;
    border-radius: 4px;

    .setpBox-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 12px;
        border-bottom: 1px solid #f5f5f5;

        .title1 {
            font-size: 17px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 24px;
            color: #4d4d4d;
        }

        .tag1 {
            padding: 5px 8px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20px;
        }
    }

    .setpBox-con {
        padding: 16px;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .topName {
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 24px;
                color: #2b2b2b;
            }

            .topTime {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 20px;
                color: #8c8c8c;
            }
        }

        .bot {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21px;
            color: #8c8c8c;
            word-break: break-all;
        }
    }
}

.empty {
    // height: 100%;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    margin-top: 50%;
    text-align: center;

    >img {
        width: 128px;
        height: 96px;
    }

    >div {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(153, 153, 153, 1);
    }
}

.green {
    background-color: rgba(2, 173, 130, 0.1);
    color: #02ad82;
}

.orige {
    background-color: rgba(252, 119, 10, 0.1);
    color: #fc770a;
}

.red {
    background-color: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}
</style>